<!-- 兰文杰 currentDate-->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>网盘--主界面</title>
<%@include file="include/css.jsp"%>
<style type="text/css">
.breadcrumb {
	background: none;
}

.breadcrumb-item+.breadcrumb-item::before {
	display: inline-block;
	padding-right: 0.5rem;
	color: #6c757d;
	content: ">";
}

.container-fluid {
	margin-top: 10px;
}

.list-group-item-action {
	border: none;
}
</style>
</head>
<body>
	<%@include file="include/header.jsp"%>
	<div class="container-fluid">
		<div class="row" style="border-bottom: 1px dashed #ccc;">
			<div class="col-md-2 text-center">
				<div class="btn-group btn-group-sm" role="group">
					<button type="button" class="btn btn-secondary">
						<i class="fa fa-arrow-left" aria-hidden="true"></i>
					</button>
					<button type="button" class="btn btn-secondary">
						<i class="fa fa-arrow-right" aria-hidden="true"></i>
					</button>
					<button type="button" class="btn btn-secondary">
						<i class="fas fa-sync-alt"></i>
					</button>
				</div>
			</div>
			<div class="col-md-7">
				<ol class="breadcrumb" style="padding: 0px;">
					<li class="breadcrumb-item" aria-current="page"><i
						class="fas fa-home"></i></li>
					<li class="breadcrumb-item" aria-current="page">全部</li>
				</ol>
			</div>
			<div class="col-md-3">
				<div class="input-group input-group-sm">
					<input type="text" class="form-control" placeholder=""
						aria-label="" aria-describedby="button-addon2">
					<div class="input-group-append">
						<button class="btn btn-outline-secondary" type="button"
							id="button-addon2">
							<i class="fas fa-search"></i>
						</button>
					</div>
				</div>
			</div>
		</div>
		<div class="row" style="margin-top: 5px;">
			<div class="col-md-2" style="border-right: 1px dotted #ccc;">
				<div class="list-group">
					<a href="#" class="list-group-item list-group-item-action active"><i
						class="fas fa-home"></i>&nbsp;全部文件</a> <a href="#"
						class="list-group-item list-group-item-action"><i
						class="fas fa-file"></i>&nbsp;我的文档</a> <a href="#"
						class="list-group-item list-group-item-action"><i
						class="fas fa-image"></i>&nbsp;我的图片</a> <a href="#"
						class="list-group-item list-group-item-action"><i
						class="fas fa-video"></i>&nbsp;我的视频</a> <a href="#"
						class="list-group-item list-group-item-action"><i
						class="fas fa-music"></i>&nbsp;我的音乐</a><a href="#"
						class="list-group-item list-group-item-action"><i
						class="fas fa-passport"></i>&nbsp;其它</a><a href="#"
						class="list-group-item list-group-item-action"><i
						class="fas fa-share-square"></i>&nbsp;我的分享</a><a href="#"
						class="list-group-item list-group-item-action"><i
						class="fas fa-trash-alt"></i>&nbsp;垃圾箱</a>
				</div>
				<div style="margin-top: 30px;">
					<div class="progress">
						<div class="progress-bar" role="progressbar" style="width: 25%;"
							aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
					</div>
					容量：
				</div>
			</div>
			<div class="col-md-10">
				<div class="btn-toolbar justify-content-between" role="toolbar"
					aria-label="Toolbar with button groups">
					<div>
						<a class="btn btn-outline-primary btn-sm" href="javascript:;"
							data-toggle="modal" data-target="#uploadFileModal"> <i
							class="fas fa-plus"></i> 上传文件
						</a> <a class="btn btn-outline-primary btn-sm" href="javascript:;"
							data-toggle="modal" data-target="#newFolderModal"> <i
							class="fas fa-folder-plus"></i> 新建文件夹
						</a> <a class="btn btn-outline-primary btn-sm"
							href="javascript:del();"> <i class="fas fa-trash-alt"></i>删除
						</a>
						<button type="button" class="btn btn-outline-primary btn-sm">
							<i class="fas fa-download"></i>下载
						</button>
						<button type="button" class="btn btn-outline-primary btn-sm">
							<i class="fas fa-edit"></i>重命名
						</button>
						<a class="btn btn-outline-primary btn-sm"
							href="${pageContext.request.contextPath}/main/list"> <i
							class="fas fa-edit"></i>刷新
						</a>
					</div>
					<div>
						<a class="btn btn-outline-secondary btn-sm"
							href="${pageContext.request.contextPath}/main/list"> <i
							class="fas fa-list-alt fa-lg"></i>
						</a> <a class="btn btn-outline-secondary btn-sm"
							href="${pageContext.request.contextPath}/main/thumbnail"> <i
							class="fas fa-grip-horizontal fa-lg"></i>
						</a>
					</div>
				</div>
				<table class="table table-hover table-sm" style="margin-top: 5px;">
					<thead>
						<tr>
							<th scope="col">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" onchange="selectedAll()"
										id="selectedAll"> <label class="custom-control-label"
										for="selectedAll"></label>
								</div>
							</th>
							<th scope="col">文件名</th>
							<th scope="col">大小</th>
							<th scope="col">分享</th>
							<th scope="col">修改日期</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${files}" var="f" varStatus="vs">
							<tr>
								<td>
									<div class="custom-control custom-checkbox">
										<input type="checkbox"
											class="custom-control-input row-checked" id="f${vs.index}"
											name="f" value="${f.name}"> <label
											class="custom-control-label" for="f${vs.index}"></label>
									</div>
								</td>
								<td><c:if test="${f.isDirectory}">
										<i class="far fa-folder-open"></i>
									</c:if> <c:if test="${!f.isDirectory}">
										<i class="far fa-file"></i>
									</c:if> &nbsp;${f.name}</td>
								<td>${f.sizeInBytes}&nbsp;B</td>
								<td><a href="#"><i class="fas fa-share-alt-square"></i></a>
								</td>
								<th scope="col"><fmt:formatDate
										pattern="yyyy-MM-dd HH:mm:ss" value="${f.lastModified}" /></th>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<%@include file="include/js.jsp"%>
	<%@include file="include/change-password.jsp"%>
	<%@include file="include/new-folder.jsp"%>
	<%@include file="include/upload-file-modal.jsp"%>
	<script>
		function selectedAll(){
			if($("#selectedAll").is(':checked')){
				$(".row-checked").each(function(index,element){
					$(element).prop('checked', true);
				});
			}else{
				$(".row-checked").each(function(index,element){
					$(element).prop('checked', false);
				});
			}
		}
		function del() {
			var isSelected=false;
			var names="";
			$(".row-checked").each(function(index, element) {
				if ($(element).is(':checked')) {
					isSelected=true;
					names=names+$(element).val()+",";
				}
			});
			if(!isSelected){
				alert("请勾选要删除的文件！");
				return;
			}
			if(confirm("此操作将永久性的删除，不可恢复，是否继续？")){
				$.ajax({
					url : "${pageContext.request.contextPath}/batch/delete/file",
					type : "POST",
					data : {
						names:names
					},
					dataType : "json",
					success : function(result) {
						if(result.code===0){
							window.location.href = "${pageContext.request.contextPath}/main/list";
						}
						alert(result.message);
					},
					error : function(err) {
						alert("删除文件失败！");
						console.log(err);
					}
				});
			}
		}
	</script>
</body>
</html>